import Vue from 'vue'
import Router from 'vue-router'
import store from './store'
import Home from './views/Home.vue'

Vue.use(Router);

// 公共路由，需要在router实例化之前
export const commonRouter = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/login',
        name: 'login',
        component: function () {
            return import(/* webpackChunkName: "about" */ './views/Login.vue')
        }
    },
    {
        path: '/404',
        component: function () {
            return import(/* webpackChunkName: "about" */ './views/404.vue')
        }
    }
];

const router = new Router({
    mode: 'history',
    routes: commonRouter
});

// 动态需要根据权限加载的路由表
export const authRouter = [
    {
        path: '/auth',
        name: 'auth',
        meta: {
            roles: ['admin']
        },
        component: () => import('./views/About.vue')
    },
    {
        path: '/auth1',
        name: 'auth1',
        meta: {
            roles: ['user']
        },
        component: () => import('./views/About.vue')
    },
    {
        path: '/auth2',
        name: 'auth2',
        meta: {
            roles: ['test']
        },
        component: () => import('./views/About.vue')
    },
    {
        path: '/auth3',
        name: 'auth3',
        meta: {
            roles: ['user', 'admin']
        },
        component: () => import('./views/Home.vue')
    },
    {
        path: '/auth4',
        name: 'auth4',
        meta: {
            roles: ['test']
        },
        component: () => import('./views/About.vue')
    },
    {
        path: '/nav',
        meta: {
            roles: ['admin', 'user']
        },
        component: () => import('./views/Nav.vue')
    }
];

/**
 * 我算是明白jwt的好处了，这里每次都要拉取用户信息，造成卡顿，解析jwt直接返回对应的权限多好，不用经常访问数据库了
 * 数据格式：meta：{ roles:['',''] }，对应用户权限数据：userInfo: roles: ['', '']，可多个，可一个
 * @type {string[]}
 */

// 白名单
const notRoleUrl = ['/login'];

// 守卫路由，用同步，在获取用户的时候加堵塞
router.beforeEach((to, from, next) => {
    // session需要用 == null进行判断，! = null
    // console.log('store:' + store.state.token + " session:" + sessionStorage.getItem("token"));

    // 获取token，如果为空，就是没有登陆过
    let token = sessionStorage.getItem("token");
    if (token != null) {
        console.log("1");
        // 修复重复访问login导致卡死
        if (to.path === '/login') {
            next('/')
        } else {
            // 如果没有有用户，但有token
            if (store.state.UserInfo.username === undefined) {
                // 通过token获取用户信息，并在vuex里设置用户信息，加堵塞，防止用户没获取到就更新数据，加堵塞之后好卡，就取消了
                let response = store.dispatch("getUserInfo", token);
                if (response.code === 200) {
                    console.log("登陆成功")
                }
                next();
            } else {
                // 如果vuex里有用户信息，就代表路由存在，就不用去获取用户信息
                console.log("3");
                next();
            }
        }
    } else {
        console.log("4");
        if (notRoleUrl.indexOf(to.path) !== -1) {
            next();
        } else {
            next('/login');
        }
    }
});

/**
 * 创建路由
 * @param userInfo 直接传入带权限的user信息
 * @param routerInfo 传入原路由
 * @returns {*}
 */
export function createRouters(userInfo, routerInfo) {
    /**
     * 在这里对比权限，返回有权限的路由。            filter是筛选数组中符合条件的数据，返回一个新的数组
     * 路由里的meta信息，是否和这个用户拥有的权限一样。                   indexOf是匹配是否存在字符串，-1就不存在
     * 条件是：路由列表的权限匹配和用户的权限只要有一个一样，就返回true                 some，只要一个条件满足，就返回true，还有个every，是必须要满足所有条件
     * https://segmentfault.com/q/1010000012735768，换了一下顺序
     */

        // 多维匹配
    let keys = Object.keys(userInfo.roles);
    return routerInfo.filter(i => {
        return keys.some(key => i.meta.roles.indexOf(userInfo.roles[key]) !== -1)
    });
}

export default router;
